<!-- 侧边菜单 -->
<template>
  <div class="menu">
    <aside class="menu-item-left" :class="{'show': nav}">
      <div class="title" style="margin: 25px;">设置</div>
      <ul class="table-view">
        <li class="table-view-cell">我的账户</li>
        <li class="table-view-cell">模型</li>
        <li class="table-view-cell">项目</li>
      </ul>
    </aside>
    <div class="modal" v-show="nav" @click="$emit('close')"></div>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {}
    },
    props: {
      nav: {
        type: Boolean,
        defalut: false
      }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {}
  }

</script>
<style lang='scss' scoped>
  @import "@/styles/index.scss";
  .menu {
    .menu-item-left {
      color: #fff;
      position: absolute;
      z-index: 10000;
      top: 0;
      bottom: 0; //   visibility: hidden;
      box-sizing: content-box;
      width: 70%;
      min-height: 100%;
      background: #333;
      transform: translate3d(-100%, 0px, 0px);
      transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
      &.show {
        // visibility: visible;
        transform: translate3d(0%, 0px, 0px);
        transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
      }
      .title {
        margin: 35px 15px 10px;
        font-size: 22px;
      }
      .table-view {
        color: #fff;
        background: #333;
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;
        @include border(1px 0 1px 0, #222);
        .table-view-cell {
          touch-action: none;
          padding: 12px 30px;
          font-size: 16px;
          @include border(0 0 1px 0, #222);
          &:last-child {
            @include border(0);
          }
          .push-right {
            position: relative;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: inherit;
          }
        }
      }
    }
    .modal {
      position: absolute;
      z-index: 998;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: background 350ms cubic-bezier(.165, .84, .44, 1);
      background: rgba(0, 0, 0, .4);
      box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
      -webkit-tap-highlight-color: transparent;
    }
  }

</style>
